<template>
	
	
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
		  <block slot="backText">返回</block>
		  <block slot="content">注册</block>
		</cu-custom>
		<!-- 登录页面正中间图标 -->
		<view class="logo">
			<view class="img">
				<image mode="widthFix"
					src="../../static/index.jpg">
				</image>
			</view>
		</view>
		<view class="title">校园管理系统</view>
		<!-- 注册界面 -->
		<view class="Loginform">
			<uni-forms :modelValue="formData" ref="form">
				<uni-forms-item  name="userno" >
					<uni-easyinput type="text" v-model="formData.userno" placeholder="请输入学号" class="inputstyle"/>
				</uni-forms-item>
				<uni-forms-item  name="username" >
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入昵称" class="inputstyle"/>
				</uni-forms-item>
				<uni-forms-item  name="newPwd" class="inputstyle">
					<uni-easyinput type="password" v-model="formData.newPwd" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item  name="confirmPwd" class="inputstyle">
					<uni-easyinput type="password" v-model="formData.confirmPwd" placeholder="请再次输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="add-cover" @click="chooseImage">
				
				<view class="default">
					<!-- 没有上传图片时状态是添加，上传版完毕是切换 -->
					<text>点击{{cover?'切换':'添加'}}头像</text>
					<!-- 这里使用 :src="cover"  将src动态赋值-->
					<image class="add-icon" :src="cover"  v-if="cover"></image>
					<image src="../../static/add.png" class="add-icon" v-else></image>
					
				</view>
			</view>

			<button @click="submitForm" class="register" >立即注册</button>
			<view  class="registertologin">
				已有账号，
				<text @click="toLogin" class="toLogin">立即登录</text> 
			</view>
		</view>
		
	</view>
</template>
 
<script>
	// 以下路径需根据项目实际情况填写
	import { pathToBase64, base64ToPath } from '../../js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				cover: '',
				formData: {
					userno:'',
					username:'',
					newPwd: '',
					confirmPwd: ''
				},
				rules: {
					userno: 
					{
						rules:[{
								required: true,
								errorMessage: '请填写学号',
							},
							// 对username字段进行长度验证
							{
								format: 'Number',
								errorMessage: '请输入12位学号！',
							},
							// 对username字段进行长度验证
							{
								minLength: 12,
								maxLength: 12,
								errorMessage: '请输入12位学号！',
							},]
					},
					username:
					{
						rules:[{
								required: true,
								errorMessage: '请填写昵称',
							},
							// 对username字段进行长度验证
							{
								format: 'Number',
								errorMessage: '请输入12位学号！',
							},
							// 对username字段进行长度验证
							{
								minLength: 1,
								maxLength: 12,
								errorMessage: '长度在少于12 个字符',
							},]
					},
					newPwd: 
					{
						rules:[
							{ required: true, errorMessage: '请输入密码'},
							{ minLength: 6, maxLength: 16, errorMessage: '长度在 6 到 12 个字符' },
						],
					},
					confirmPwd: 
					{
						rules:[
							{ required: true, errorMessage: '请确认密码' },
							{ minLength: 6, maxLength: 16, errorMessage: '长度在 6 到 12 个字符' },
							{ validateFunction: (rule,value,data,callback)=>{
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									setTimeout(() => {
										if (value === '') {
											reject(new Error('请再次输入密码'));
										} else if (value !== this.formData.newPwd) {
											reject(new Error('两次输入密码不一致!'));
										} else {
											resolve();
										}
									}, 100)
								})
							} }
						],
					},
					
				}
				
			}
		},
		onReady() {
				// 需要在onReady中设置规则
				this.$refs.form.setRules(this.rules)
		},
		methods:{
			submitForm(){
				this.$refs.form.validate().then(async res=>{
					const params = {
						userno: this.formData.userno,
						username: this.formData.username,
						pwd: this.formData.newPwd,	
						img:this.cover
					};
					
					const data = await uni.$http.post('/api/register',params)
					
					if(data.data.status===0){
						uni.showToast({
							title: '注册成功！',
							icon: 'success',
							duration:1500
						});
						const timer=setInterval(()=>{
							uni.switchTab({
								url:'/pages/home/home'
							})
						},2000)
						
					}
					else{
						return uni.showToast({
							title: data.data.message,
							icon: 'error',
							duration:1500
						});
					}
				}).catch(err =>{
				})
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			chooseImage(){
				uni.chooseImage({
					count:1,
					sizeType: ['original'],
					success: (res) => {
						const tempFilePaths =res.tempFilePaths//图片临时数组
						pathToBase64(tempFilePaths[0])
						  .then(base64 => {
						    this.cover=base64
						  })
						  .catch(error => {
						    console.error(error)
						  })
						
					}
				})
		},

		}
	}
</script>
 
<style lang="scss">
	.title{
		color: #f39a6e;
		font-size: 50rpx;
		text-align: center;
		margin-bottom: 48rpx;
	}
	.logo {
		width: 100%;
		height: 45vw;
		display: flex;
		justify-content: center;
		align-items: center;
 
		.img {
			width: 25%;
			height: 25vw;
 
			image {
				width: 100%;
				border-radius: 100%;
			}
		}
	}
	.Loginform{
		width: 600rpx;
		margin-top: 20rpx;
		margin-left: 80rpx;
		.register{
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #f39a6e;
			
		}
		.registertologin{
			text-align: center;
			margin-top: 5rpx;
			font-size: 30rpx;
			.toLogin{
			   color: #f39a6e;
			}
		}
		
		.add-cover{
			width: 270rpx;
			height: 350rpx;
			margin-top: 10rpx;
			.default {
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: gray;
				background-color: rgba(255, 255, 255, 0.2);
				.add-icon {
					width: 270rpx;
					height: 270rpx;
				}
				text{
				}
			}
					
		}
		
		
		
			
			
	}

</style>